<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define coordinates and dimensions
        const A = { x: 100, y: 250 };
        const l = 300;
        const rodThickness = 4;
        const B = { x: A.x + l, y: A.y };
        // Place C to make a visually clear angle
        const C = { x: A.x, y: A.y - 150 };

        // --- Draw the Components ---

        // 1. Draw the Wall
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(A.x, C.y - 50);
        ctx.lineTo(A.x, A.y + 70);
        ctx.stroke();

        // Draw hatching for the wall
        ctx.lineWidth = 1;
        const hatchLength = 10;
        const hatchSpacing = 10;
        for (let y = C.y - 50; y < A.y + 70; y += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(A.x, y);
            ctx.lineTo(A.x - hatchLength, y + hatchLength);
            ctx.stroke();
        }

        // 2. Draw the Rod AB
        ctx.lineWidth = 1.5;
        // Top line of the rod
        ctx.beginPath();
        ctx.moveTo(A.x, A.y - rodThickness / 2);
        ctx.lineTo(B.x, B.y - rodThickness / 2);
        ctx.stroke();
        // Bottom line of the rod
        ctx.beginPath();
        ctx.moveTo(A.x, A.y + rodThickness / 2);
        ctx.lineTo(B.x, B.y + rodThickness / 2);
        ctx.stroke();
        // End cap at B
        ctx.beginPath();
        ctx.moveTo(B.x, B.y - rodThickness / 2);
        ctx.lineTo(B.x, B.y + rodThickness / 2);
        ctx.stroke();

        // 3. Draw the Rope CB
        ctx.beginPath();
        ctx.moveTo(C.x, C.y);
        ctx.lineTo(B.x, B.y - rodThickness / 2); // Connect to the top corner of the rod
        ctx.stroke();

        // --- Draw Labels and Symbols ---

        // 4. Draw Angle θ
        const angleRadius = 40;
        const startAngle = Math.atan2(C.y - B.y, C.x - B.x); // Angle of vector BC
        const endAngle = Math.PI; // Angle of vector BA
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(B.x, B.y, angleRadius, startAngle, endAngle);
        ctx.stroke();

        // Draw theta symbol
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('θ', B.x - 55, B.y - 12);

        // 5. Draw Point Labels A, B, C
        ctx.font = '24px Times New Roman';
        ctx.textAlign = 'start'; // Reset alignment
        ctx.fillText('A', A.x - 30, A.y);
        ctx.fillText('B', B.x + 15, B.y + 8);
        ctx.fillText('C', C.x - 30, C.y + 10);

        // 6. Draw Rod Properties l, W₀
        ctx.font = 'italic 20px Times New Roman';
        const lw_x = A.x + 80;
        const lw_y = A.y + 35;
        ctx.fillText('l, W', lw_x, lw_y);
        // Draw subscript '0'
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('0', lw_x + 38, lw_y + 5);

        // 7. Draw the Caption
        ctx.font = '20px SimHei'; // A common Chinese font
        ctx.textAlign = 'center';
        ctx.fillText('力图 5.2.1', canvas.width / 2, canvas.height - 30);

    </script>
</body>
</html>